<template>
    <div class="serviceSummaryBox ">
        <div class="flexCenterBetween text-center px-20 mb-6 .text-light-blue">
            <div>
                <div class="digitalFont text-size-28 line-height-12 text-39fef8">{{dataServiceSummary.post1}}</div>
                <div>巡逻岗</div>
            </div>
            <div class="gradientLine1px" style="height: 40px;"></div>
            <div>
                <div class="digitalFont text-size-28 line-height-12 text-39fef8">{{dataServiceSummary.post2}}</div>
                <div>集指岗</div>
            </div>
            <div class="gradientLine1px" style="height: 40px;"></div>

            <div>
                <div class="digitalFont text-size-28 line-height-12 text-39fef8">{{dataServiceSummary.police1}}</div>
                <div>民警</div>
            </div>
            <div class="gradientLine1px" style="height: 40px;"></div>

            <div>
                <div class="digitalFont text-size-28 line-height-12 text-39fef8">{{dataServiceSummary.police2}}</div>
                <div>辅警</div>
            </div>
        </div>
        <div class="flexCenterBetween text-right">

            <div class="servicePart part2">
                <div class="text-size-30 digitalFont line-height-1 text-39fef8">
                    {{dataServiceSummary.policeDeploymentNum}}
                </div>
                <div>部警数量</div>
            </div>

            <div class="servicePart part1 ">
                <div class="text-size-30 digitalFont line-height-1 text-39fef8">
                    {{dataServiceSummary.onDutyNum}}
                </div>
                <div>部岗数量</div>
            </div>

            <div class="servicePart part3">
                <div class="text-size-30 digitalFont line-height-1 text-39fef8">
                    {{dataServiceSummary.notOnTimeNum}}
                </div>
                <div>迟到早退</div>
            </div>
        </div>
        <div class="flexCenterBetween mt-4 d-flex py-4 px-10" style="background-color: rgba(0,0,0,0.2)">

            <div style="" class="flex-no-zoom mr-6">在岗率</div>
            <div style="border:1px solid #1b3f94;border-radius: 100px;padding:1px;" class="w-100 mr-6">
                <div style="background-color:#00deff;border-radius: 100px;height:6px;"
                     :style="{width:dataServiceSummary.onDutyRate+'%'}"></div>
            </div>
            <div class="text-00deff">
                <span class="text-size-18 digitalFont line-height-08 mr-4">{{dataServiceSummary.onDutyRate}}</span>
                <span>%</span>
            </div>

        </div>

    </div>

</template>

<script>
    import {getServiceSummary} from "../../common/api";
    import {clearIntervalArray} from "../../utils/js-utils";
    import * as moment from "moment";

    export default {
        name: "serviceSummary",
        data() {
            return {
                dataServiceSummary: {},// 勤务运行概览

                intervalArray: [],
            }
        }, methods: {
            getServiceSummary() {// 勤务运行概览
                //todo 发版修改
                var reqBody = {
                    // currentTime:'2020-11-26'
                    currentTime: moment().format("YYYY-MM-DD")
                };
                getServiceSummary(reqBody).then(res => {
                    if (res.isSuccess) {
                        this.dataServiceSummary = res.data;
                    }
                })
            },
        },
        mounted() {

            this.getServiceSummary();
            this.intervalArray.push(setInterval(this.getServiceSummary, 1000 * 60 * 15))

        }, beforeDestroy() {
            clearIntervalArray(this.intervalArray)
        }
    }
</script>

<style scoped>

    .serviceSummaryBox {
        background-image: url("../../assets/img/dutyMonitoring/bgServiceSummary.png");
        height: 263px;
        position: relative;
        padding: 60px 35px 20px 30px;
        margin-top: -20px;
    }

    .servicePart {
        width: 157px;
        height: 86px;
        padding: 17px 20px 0 0;
    }

    .servicePart.part1 {
        background-image: url("../../assets/img/dutyMonitoring/bgComePosition.png");

    }

    .servicePart.part2 {
        background-image: url("../../assets/img/dutyMonitoring/bgPoliceNO.png");
    }

    .servicePart.part3 {
        background-image: url("../../assets/img/dutyMonitoring/bgLateNO.png");
    }

</style>
